<template>
  <div class="bodys">
    <div class="login_top">
      <div class="login_top_main">
        <img src="../assets/logo.png" alt="">
        <span>国家调查业务技能测试系统</span>
      </div>
    </div>
    <div class="login_content"></div>
    <div class="login_content_main">
      <div class="left_img">
        <img src="../assets/img_data.png" alt="">
      </div>
      <div class="right_main">
        <h3>用户登录</h3>
        <div class="label">
          <img src="../assets/icon_user.png" alt="">
          <el-input type="text" v-model="ruleForm.username" placeholder="请输入用户名" size="small"></el-input>
        </div>
        <div class="label">
          <img src="../assets/icon_password.png" alt="">
          <el-input type="password" v-model="ruleForm.password" show-password placeholder="请输入密码"
            size="small"></el-input>
        </div>
        <div class="label">
          <img src="../assets/icon_code.png" alt="">
          <el-input class="code" type="text" v-model="ruleForm.verification" placeholder="请输入验证码" size="small"></el-input>
          <span @click="refresh" style="cursor: pointer;"><img :src="codeSrc" alt=""></span>
        </div>
        <p class="input_info"></p>
        <button class="login-but" @click="submitForm()">登录</button>
        <div class="main_buttom_img">
          <img src="../assets/projection.png" alt="">
        </div>
        <div class="main_left-tree">
          <img src="../assets/tree.png" alt="">
        </div>
      </div>
    </div>
    <div class="reg">
      <hr>
      <p>版权归属：国家统计局宜宾调查队<span style="margin-right: 3px;margin-left: 3px;">|</span>支持单位：四川中软国际信息技术有限公司</p>
    </div>
  </div>
</template>
<script>
import { login, getcode } from "@/api/login";
export default {
  data() {
    return {
      ruleForm: {
        username: "",
        password: "",
        verification: '',
        uuid: ''
      },
      codeSrc: ''
    };
  },
  mounted() {
    this.getcode()
  },
  methods: {
    getcode() {
      getcode().then((res) => {
        this.ruleForm.uuid = res.data.data.uuid
        this.codeSrc = 'data:image/png;base64,' + res.data.data.verification
      })
    }
    ,
    refresh() {
      this.getcode()
    },
    submitForm() {
      login(this.ruleForm)
        .then((res) => {
          this.username = res.data.username;
          if (res.data.status == 200) {
            console.log(res);
            this.$message({
              message: res.data.message,
              type: "success",
            });
            localStorage.setItem('token', res.data.data.token);
            localStorage.setItem('username', res.data.data.username);
            if (res.data.data.username != 'root') {
              this.$router.push(
                { path: "/checkmajor" }
              )
            } else {
              this.$router.push(
                { path: "/HomePage" }
              )
            }
          } else {
            this.$message.error(res.data.message);
            this.getcode()
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped>
:deep(.el-input__inner) {
  border: none;
  height: 20px;

}

:deep(.el-input) :focus {
  transition: all .5s;
  box-shadow: 0px 0px 3px 0.5px #409EFF;
}

.bodys {
  width: 100vw;
  height: 100vh;
  background: #4BA4F8;
  margin: 0;
  padding: 0;
  font-family: "微软雅黑";

  .login_top {
    // border: 1px solid red;
    background: #fff;
  }
  .login_top_main {
    width: 1100px;
    height: 85px;
    // border: 1px solid red;
    padding: 10px 0;
    margin: auto;

    img {
      width: 65px;
      display: inline-block;
      vertical-align: middle;
      overflow-clip-margin: content-box;
      overflow: clip;
    }

    span {
      display: inline-block;
      vertical-align: middle;
      font-size: 30px;
      margin: 0 0 0 10px;
      color: #656565;
      letter-spacing: 2px;
    }
  }

  .login_content {
    height: 500px;
    // border: 1px solid red;
    background-color: #F5FAFE;
    background-image: url(../assets/bg.png);
    background-repeat: no-repeat;
    background-position: bottom center;
  }

  .login_content_main {
    width: 1100px;
    // margin: auto;
    height: 500px;
    position: absolute;
    top: 10%;
    left: 50%;
    margin: 0 0 0 -550px;
    // border: 1px solid red;

    .left_img {
      position: absolute;
      left: 0px;
      bottom: -50px;

      img {
        width: 500px;
        overflow-clip-margin: content-box;
        overflow: clip;
      }
    }

    .right_main {
      position: absolute;
      width: 370px;
      height: 450px;
      right: 0;
      background: #fff;
      bottom: -100px;
      padding: 25px 40px;
      border-radius: 5px;

      h3 {
        font-size: 20px;
        color: #4BA4F8;
        text-align: center;
        margin: 0 0 50px 0;
        font-weight: 600;
        letter-spacing: 2px
      }

      .label {
        border: 1px solid #E8E8E8;
        border-radius: 2px;
        padding: 8px 15px;
        margin: 27px 0 0 0;
        height: 25px;
        overflow: hidden;
        position: relative;

        img {
          vertical-align: middle;
          margin: 0 15px 0 0;
          overflow-clip-margin: content-box;
          overflow: clip;
        }

        span {
          position: absolute;
          right: 10px;
          width: 80px;
          border-left: 1px solid #DDDDDD;
          float: right;
          padding: 0 10px;
          // border: 1px solid red;

          img {
            vertical-align: middle;
            margin: 0 15px 0 0;
            width: 80px;
            aspect-ratio: auto 65 / 20;
            height: 30px;
          }
        }

        .el-input {
          width: 300px;
        }

        :deep(.el-input--small .el-input__icon) {
          line-height: 20px;
        }

        .code {
          width: 170px;
        }
      }
    }
  }

  .input_info {
    color: #f00;
    font-size: 12px;
    margin: 15px 0 0 15px;
  }

  .login-but {
    width: 100%;
    background: #4BA4F8;
    border: none;
    border-radius: 5px;
    color: #fff;
    padding: 15px 0;
    margin: 30px auto 0 auto;
    cursor: pointer;
  }

  .main_buttom_img {
    position: absolute;
    bottom: -26px;
    left: 0px;
    z-index: -1;

    img {
      overflow-clip-margin: content-box;
      overflow: clip;
    }
  }
  .main_left-tree {
    position: absolute;
    bottom: -27px;
    left: -59px;

    img {
      overflow-clip-margin: content-box;
      overflow: clip;
    }
  }
  .reg{
    width: 100%;
    position:absolute;
    bottom: 0;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    p{
      width:600px;
      color: #fff;
      font-size: 12px;
      text-align: center;
    }
    
    hr{
      border-color: rgba(0,0,0,.12);
    }
  }
}</style>
